<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=pie-doughnut
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">

<head>
  <meta charset="utf-8">
</head>
<style>
  #body {
     /* background-color: #041730; */
    margin: auto;
    width: 320px;
    /* height: 15px;  */

  }

  .huanhang {
    width: 100px;
    margin-left: 20px;
    
  }
</style>

<body id="body">
  <div id="container" style="height: 178px;width: 178px"></div>


  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    const datas = [
      { value: 120, name: '正式员工保险合计<br/><span class="huanhang">(个人部分)</span>' },
      { value: 400, name: '外聘员工保险合计<br/><span class="huanhang">(单位部分)</span>' },
      { value: 400, name: '外聘员工保险合计<br/><span class="huanhang">(个人部分)</span>' },
      { value: 400, name: '正式员工保险合计<br/><span class="huanhang">(单位部分)</span>' }
    ]
    var option;

    option = {
      tooltip: {
        trigger: 'item',
        // position: ['50', '50'],

        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'line' // 默认为直线，可选为：'line' | 'shadow'
        },
        className: 'custom-tooltip-box',
        formatter: function (params) {
          console.log(params)
          let htmlStr
          htmlStr =
            `
                <div>
                  <span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;margin-left:10px; background-color:${[
              params.color, // 默认是小圆点，我们将其修改成有圆角的正方形，这里用的是模板字符串。并拿到对应颜色、名字、数据
            ]};">  </span>  
                  <div class='name'>${params.data.name}</div><br/>    
                 <div class='writing'><span class="size ">${params.data.value}</span><span class="title">金额</span></div>
                 <div class='writing'><span class="size"style="text-shadow:none;color:${[params.color,]}">${params.percent}%</span><span class="title">占比</span></div>
             
                
                </div>
              `
          return htmlStr;

        }

      },
      // legend: {
      //   top: '5%',
      //   left: 'center'
      // },
      graphic: {
        type: 'text',
        left: 'center',
        top: 'center',
        style: {

          // text: '总数',
          text:
            datas.reduce((n, i) => {
              return (n += i.value);
            }, 0) + '万\n\n合计金额',

          textAlign: 'center',
          fill: '#fff',

          // width: 30,
          // height: 30,

          fontSize: 10,

        }
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            // position: 'center'
          },
          emphasis: {
            // label: {
            //   // show: true,
            //   fontSize: 40,
            //   fontWeight: 'bold'
            // }
          },
          // labelLine: {  
          //   show: false
          // },
          data: datas,

        }
      ]
    };

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
  <style scoped lang="scss">
    .custom-tooltip-box {
      width: 158px;
      height: 84px;
      padding: 0 !important;
      border: none !important;
      box-shadow: none !important;
      background-color: transparent !important;
      background: url("image/Rectangle\ 24@2x.png") no-repeat;
      background-size: 156px;
    }

    .name {
      font-size: 14px;
      /* margin-left: 20px; */
      display: inline;
      color: #fff;
    }

    .size {
      /* margin-top: -10px; */
      font-size: 14px;
      display: block;

    }
    .writing {
      text-align: center;
      line-height: 20px;
      display: inline-block;
      width: 55px;
      background: linear-gradient(180deg, rgba(48, 135, 229, 1) 0%, rgba(255, 255, 255, 1) 100%);
      -webkit-background-clip: text;
      /* 使用-webkit-前缀兼容部分浏览器 */
      background-clip: text;
      color: transparent;
      text-shadow: 0px 0px 6px rgba(53, 219, 255, 1);

    }

    .title {
      font-size: 14px;
      color: #fff;
    }
  </style>
</body>

</html>